<template>
          <!-- 表单区域 -->
   <div class="form" >
    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
            <el-form-item v-for="(item,index) in formInput" :key="item.index" :label="item.name">
            <el-input v-model="formInline.user" placeholder="" />
            </el-form-item>

            <el-form-item v-for="(item,index) in formselect" :key="item.index" :label="item.name">
            <el-select v-model="formInline.region" >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            </el-form-item>
    

            <el-form-item v-for="(item,index) in formMoreselect" :key="item.index" :label="item.name">
                <el-select v-model="formInline.region" >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
                <el-select v-model="formInline.region">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
                <el-select v-model="formInline.region">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>

            <el-form-item>
            <el-button type="success" @click="reset">重置</el-button>
            <el-button type="success" @click="chaxun">查询</el-button>
            <el-button type="primary" @click="onSubmit">新增</el-button>
            </el-form-item>
  </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps({
    formInput: Array,
    formMoreselect: Array,
    formselect: Array,
})
const formInline = reactive({
    user:'',
    region:'',
})
const onSubmit = () => {
  console.log('submit!')
}
//查询时请求并发送参数
const chaxun = () => {
  
}
const reset = () => {
  console.log('submit!')
}

</script>

<style scoped>
.form{
  background-color: rgb(255,255,255);
  padding: 20px 40px;
  border-bottom: 1px dashed rgb(44, 36, 36);
  margin-bottom: 20px;
}
</style>